<template>
    <div class="extension-js-editor">
        <span class="extension-params-label">{{ props.displayName }}</span>
        <div class="javascript-editor">
            <v-ace-editor
                v-model:value="modelValue"
                lang="javascript"
                theme="chrome"
                :readonly="props.readonly || props.disabled"
                @change="inputChange"
            />
        </div>
        <el-tooltip v-if="props.tip" :content="props.tip">
            <el-icon>
                <QuestionFilled />
            </el-icon>
        </el-tooltip>
    </div>
</template>

<script setup lang="ts">
import {QuestionFilled} from '@element-plus/icons-vue';
import {ElIcon, ElTooltip} from 'element-plus';
import {VAceEditor} from 'vue3-ace-editor';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-chrome';

const modelValue = defineModel({
    type: String,
    default: ''
});

const props = defineProps({
    tip: String,
    displayName: [String, Array],
    disabled: Boolean,
    readonly: Boolean
});
const emit = defineEmits(['update:modelValue']);
const inputChange = (val) => {
    emit('update:modelValue', val);
};
</script>

<style lang="less" scoped>
@import '../css/lib.less';
.extension-js-editor {
    margin-top: 12px;
    display: inline-flex;
}
.javascript-editor {
    display: inline-block;
    width: 400px;
}
.tip-icon {
    color: @dls-color-gray-7;
    margin-left: 12px;
}
</style>
